<template>
  <div class="dashboard-container">
    <!-- 上部：居中的搜索框 -->
    <div class="search-section">
      <div class="search-wrapper">
        <el-input
          v-model="searchQuery"
          placeholder="请输入搜索内容"
          class="search-input"
          clearable
        >
          <template #append>
            <el-button icon="el-icon-search" @click="handleSearch" />
          </template>
        </el-input>
      </div>
    </div>

    <!-- 中部：完整展示的图片 -->
    <div class="image-section">
      <el-image
        :src="require('@/assets/show.jpg')"
        fit="contain"
        class="display-image"
      />
    </div>

    <!-- 下部：介绍文本 -->
    <div class="intro-section">
      <h2 class="intro-title">系统介绍</h2>
      <p class="intro-content">
        欢迎使用本伪饿了么系统，当前登录用户：<strong>{{ name }}</strong>。
        这是一个基于 Vue.js + Element UI 开发的伪饿了么外卖系统平台。
      </p>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      searchQuery: ''
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  methods: {
    handleSearch() {
      if (this.searchQuery.trim()) {
        this.$router.push({
          path: '/search',
          query: {
            keyword: this.searchQuery.trim()
          }
        })
      } else {
        this.$message.warning('请输入搜索内容')
      }
    }
  }
}
</script>


<style lang="scss" scoped>
.dashboard-container {
  margin: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-height: 100vh;

  /* 搜索区域（居中） */
  .search-section {
    display: flex;
    justify-content: center;
    width: 100%;

    .search-wrapper {
      width: 100%;
      max-width: 500px; /* 控制搜索框最大宽度 */
    }

    .search-input {
      width: 100%;
    }
  }

  /* 图片区域（完整展示） */
  .image-section {
    display: flex;
    justify-content: center;
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;

    .display-image {
      max-width: 100%;
      max-height: 40vh; /* 控制图片最大高度 */
      object-fit: contain;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }

  /* 介绍区域 */
  .intro-section {
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 8px;
    text-align: center;

    .intro-title {
      color: #333;
      margin-bottom: 15px;
    }

    .intro-content {
      color: #666;
      line-height: 1.8;
      margin: 0 auto;
      max-width: 800px;
    }
  }
}
</style>
